<template>
  <div class="control">
    <div class="control-inner">
      <div class="name-box">
        <div class="name">
          <span class="no_name animated up" v-if="!name">请先选择设备！</span>
          <div v-else>
            <span>{{ name }}</span>
            <span class="chns" v-if="!!channel"
              >-通道 {{ Number(Number(channel) + 1) }}</span
            >
          </div>
        </div>
        <el-button
          class="search-btn"
          type="primary"
          size="mini"
          plain
          @click="search_fn('form')"
          >搜索</el-button
        >
      </div>

      <el-form
        :inline="true"
        :model="ruleform"
        ref="form"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="" prop="start_time">
          <el-date-picker
            time-arrow-control
            v-model="ruleform.start_time"
            type="datetime"
            placeholder="开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" prop="end_time">
          <el-date-picker
            time-arrow-control
            v-model="ruleform.end_time"
            type="datetime"
            placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-button
          class="search-btn"
          type="primary"
          size="mini"
          plain
          @click="search_fn('form')"
          >搜索</el-button
        > -->
      </el-form>
    </div>
    <div class="list-box">
      <!-- <happy-scroll color="#4677d4" size="5" resize> -->
      <div class="box-out">
        <div
          v-if="files.length > 0"
          class="item"
          v-for="(item, index) in files"
          :key="index"
          @click="plan_fn(item.url, index, files)"
          :class="activeIndex == index ? 'activeLi' : ''"
          :title="item.start_time + '至' + item.end_time"
        >
          {{ item.start_time + "至" + item.end_time }}
        </div>
        <div class="noData" v-if="showNoData">暂无数据 !</div>
      </div>

      <!-- <ul>
          <li
            v-if="files.length > 0"
            class="item"
            v-for="(item, index) in files"
            :key="index"
            @click="plan_fn(item.url, index, files)"
            :class="activeIndex == index ? 'activeLi' : ''"
            :title="item.start_time + '至' + item.end_time"
          >
           
              {{ item.start_time + "至" + item.end_time }}
           
          </li>
          <li class="noData" v-if="showNoData">
            暂无数据 !
          </li>
        </ul> -->
      <!-- </happy-scroll> -->
    </div>
  </div>
</template>

<script>
import bus from "@/utils/bus";
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      sn: "",
      name: "",
      channel: "",
      treeId: "",
      value: "",
      files: [],
      ruleform: {
        start_time: "",
        end_time: "",
      },
      rules: {
        start_time: [{ required: false, message: "请输入", trigger: "blur" }],
        end_time: [{ required: false, message: "请输入", trigger: "blur" }],
      },
      activeIndex: null,
      showNoData: false,
      //autoPlayIndex_sel:0,
    };
  },
  computed: {
    //获取到tree改变的id
    treeData() {
      return this.$store.state.cameraPlay.treeData;
    },
    autoPlayIndex() {
      return this.$store.state.cameraPlay.autoPlayIndex;
    },
    tree_selected_obj() {
      let tree_selected_obj = this.$store.state.videoRecord.tree_selected_obj;
      return tree_selected_obj || [];
    },
  },
  created() {},
  mounted() {
    this.name = "";
  },
  methods: {
    //搜素
    search_fn(formName) {
      // console.log(this.sn);
      var that = this;
      that.files = [];
      if (that.sn == null) {
        that.$message.error("请先选择设备");
        return;
      }
      let start_time = that.ruleform.start_time;
      let end_time = that.ruleform.end_time;
      if (start_time == "" && end_time == "") {
        this.$message.error("请选择起止时间");
        return;
      }
      if (start_time == "" || start_time == null) {
        this.$message.error("请选择开始时间");
        return;
      }
      if (end_time == "" || end_time == null) {
        this.$message.error("请选择结束时间");
        return;
      }

      //先注释了
      if (Number(end_time) - Number(start_time) <= 0) {
        //   console.log(start_time);
        //   console.log(end_time);
        if (start_time == "" || start_time == null) {
          this.$message.error("请选择开始时间");
          return;
        }
        if (end_time == "" || end_time == null) {
          this.$message.error("请选择结束时间");
          return;
        }
        this.$message.error("结束时间不能早于开始时间");
        return;
      }

      postData("/adminweb/mem/video/file/search", {
        sn: that.sn,
        channel: Number(this.channel) ? Number(this.channel) : 0,
        start_time: start_time.getTime(),
        end_time: end_time.getTime(),
      })
        .then((res) => {
          if (res.code == 0) {
            // that.files = [
            //   {
            //     url: "http://39.106.10.163:91/demo.mp4",
            //     start_time: "11111111111111",
            //     end_time: "2021-6-111 09:34:21",
            //   },
            //   {
            //     url: "http://39.106.10.163:91/demo1.mp4",
            //     start_time: "2222222222222222",
            //     end_time: "2021-6-2222 09:34:21",
            //   },
            //   {
            //     url: "cccc",
            //     start_time: "333333333333333333",
            //     end_time: "2021-6-3333-09:34:21",
            //   },
            //   {
            //     url: "ddd",
            //     start_time: "44444444444444444444",
            //     end_time: "2021-6-3333-09:34:21",
            //   },
            //   {
            //     url: "rrr",
            //     start_time: "555555555555555555",
            //     end_time: "2021-6-3333-09:34:21",
            //   },
            //   {
            //     url: "hh",
            //     start_time: "66666666666666666",
            //     end_time: "2021-6-3333-09:34:21",
            //   },
            //   {
            //     url: "jj",
            //     start_time: "7777777777777777",
            //     end_time: "2021-6-3333-09:34:21",
            //   },
            //   {
            //     url: "mm",
            //     start_time: "8888888888888888888",
            //     end_time: "2021-6-3333-09:34:21",
            //   },
            //   {
            //     url: "mm",
            //     start_time: "9999999999999999999",
            //     end_time: "2021-6-3333-09:34:21",
            //   },
            //   {
            //     url: "mm",
            //     start_time: "10101010101010101010",
            //     end_time: "2021-6-3333-09:34:21",
            //   },
            //   {
            //     url: "mm",
            //     start_time: "12121212121212121121",
            //     end_time: "2021-6-3333-09:34:21",
            //   },
            //   {
            //     url: "mm",
            //     start_time: "1313131313131313131",
            //     end_time: "2021-6-3333-09:34:21",
            //   },
            //   {
            //     url: "mm",
            //     start_time: "1414141414114141414",
            //     end_time: "2021-6-3333-09:34:21",
            //   },
            // ];

            //解开上边的，注释这个
            if (res.datas.files.length == 0) {
              that.showNoData = true;
            } else {
              that.files = res.datas.files;
              that.$message.success("搜索成功");
            }
          } else if (res.code == -56055) {
            return;
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res);
        });
    },
    plan_fn(url, index, files) {
      this.activeIndex = index;
      //点击search li传给播放器
      this.$store.commit("cameraPlay/setRecordSearchUrl", [index, files]);
    },
  },
  watch: {
    treeData: {
      handler(_new) {
        //  console.log(_new);
        this.activeIndex = _new;
      },
      deep: true,
      immediate: true,
    },
    autoPlayIndex: {
      handler(_new) {
        // console.log(_new);
        this.activeIndex = _new;
      },
      deep: true,
      immediate: true,
    },
    tree_selected_obj: {
      handler(_new) {
        //   console.log(_new);
        this.sn = _new.sn;
        this.name = _new.device_name;
        this.channel = _new.channel;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style scoped>
.control {
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0, 0.8);
  /* box-shadow: 0px 2px 3px #438ec0; */
  position: relative;
  margin: 0 auto;
  margin-top: 2%;
  padding: 0 10px;
  padding-right: 0;
  overflow: hidden;
}
.demo-form-inline {
  position: relative;
}
/* .search-btn {
  position: absolute;
  right: 0;
  bottom: 23px;
  height: 30px;
  line-height: 1;
} */
.control {
  display: flex;
  flex-flow: column;
}
.list-box {
  width: 100%;
  flex: 1;
  overflow: scroll;
  padding-bottom: 40px;
}

/* .list-box ul {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.list-box ul .item {
  width: 100%;
  height: 35px;
  line-height: 35px;
  color: rgb(221 223 226);
  padding-left: 5px;
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid #193c7e;
} */
.box-out {
  width: 100%;
  height: auto;
  overflow: scroll;
}
.box-out::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.box-out::-webkit-scrollbar-track {
  background: #000;
  border-radius: 2px;
}
.box-out::-webkit-scrollbar-thumb {
  background: #4677d4;
  border-radius: 10px;
}
.box-out::-webkit-scrollbar-thumb:hover {
  background: #4677d4;
}
.box-out::-webkit-scrollbar-corner {
  background: #4677d4;
}

/* div::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
div::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
  background: #333;
}
div::-webkit-scrollbar-corner{
  background: #179a16;
} */

.box-out .item {
  width: 100%;
  height: auto;
  line-height: 35px;
  color: rgb(221 223 226);
  padding-left: 5px;
  font-size: 14px;
  cursor: pointer;
  /* overflow: hidden; */
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid #193c7e;
}
.noData {
  width: 100%;
  height: 35px;
  line-height: 35px;
  color: rgb(221 223 226);
  padding-left: 5px;
  font-size: 14px;
}
/* .list-box ul li:hover {
  color: #4676d4;
  font-size: 15px;
} */
.activeLi {
  color: #4676d4 !important;
  font-size: 15px !important;
}

/* .list-box ul li:nth-of-type(2n + 1) {
  background-color: #193c7e;
} */

.list-box::-webkit-scrollbar {
  display: none;
}
.control >>> .el-form-item__label {
  color: #fff !important;
}
.control >>> .el-button--primary.is-plain {
  background: #193c7e !important;
  border: 1px solid #4676d4 !important;
  color: rgb(221 223 226) !important;
}
.control >>> .el-form-item {
  margin-bottom: 10px !important;
}
/* 去掉清空按钮 */
/* .control >>> .el-input__suffix {
  display: none !important;
} */

.box-out {
  width: 100%;
  height: 100%;
}
</style>
<style>
.el-date-editor .el-range-separator {
  font-size: 12px;
  width: 7%;
  background: #092348;
  color: rgb(221 223 226);
}
.control .el-input__inner {
  width: 100%;
  height: 35px;
  line-height: 35px;
  background: #092348;
  border: 1px solid #4676d4;
  color: rgb(221 223 226);
}
.control .el-range-input {
  background: #092348;
  color: rgb(221 223 226);
}
.chns {
  color: rgb(184, 217, 247);
}
.name-box {
  display: flex;
  justify-content: space-between;
}
.search-btn {
  /* position: absolute;
  right: 0;
  bottom: 23px; */
  height: 30px;
  line-height: 1;
}
.name {
  color: #fff;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  position: relative;
}
.no_name {
  line-height: 30px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
}
.animated {
  animation-duration: 3s; /*动画时间*/
  animation-fill-mode: both; /*播放后的状态*/
}

.animated {
  animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
}

.animated {
  animation-duration: 3s; /*动画时间*/
}
.up {
  animation-name: upAnimation; /*动画的名称*/
  transform-origin: center bottom; /*设置动画旋转元素的基点为*/
  cursor: pointer;
}
@keyframes upAnimation {
  0%,
  100%,
  20%,
  50%,
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);
    transform: translate3d(0, -10px, 0);
  }
  70% {
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
</style>
